<template>
  <view class="search">
    <view class="u-m-15">
      <u-search
        placeholder="输入商品名"
        v-model="goodsName"
        :action-style="btnBgc"
        @custom="searchGoods"
        @search="searchGoods"
        :focus="true"
      ></u-search>
    </view>
    <!-- 搜索后的数据渲染 -->
    <navigator
      v-for="item in goodsList"
      :key="item.goods_id"
      class="goods-conten"
      :url="'/pages/goods_detail/goods_detail?goods_id=' + item.goods_id"
    >
      <u-row>
        <u-col span="4">
          <view class="goods-image">
            <u-image
              width="191"
              height="191"
              :src="item.goods_small_logo"
            ></u-image>
          </view>
        </u-col>
        <u-col span="8">
          <view class="goods-item">
            <view class="goods-name">{{ item.goods_name }}</view>
            <view class="goods-price">￥{{ item.goods_price }}</view>
          </view>
        </u-col>
      </u-row>
    </navigator>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goodsName: "创维",
      goodsList: [],
      btnBgc: {
        width: "101rpx",
        height: "61rpx",
        lineHeight: "61rpx",
        backgroundColor: "#eb4450",
        borderRadius: "8rpx",
        color: "#fff",
      },
    };
  },
  methods: {
    async searchGoods() {
      const res = await this.$u.get("/goods/search", {
        query: this.goodsName,
      });
      this.goodsList = res.goods;
    },
  },
};
</script>

<style lang="scss">
.goods-conten {
  //   background-color: pink;
  border-bottom: 1px solid $themeColor;
  margin: 0 26rpx;
  margin-bottom: 26rpx;
  padding: 10rpx 0;
  .goods-image {
    flex: 1;
    display: flex;
    justify-content: center;
  }
  .goods-item {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 191rpx;
    .goods-name {
      font-size: 26rpx;
    }
    .goods-price {
      color: red;
      font-weight: 700;
    }
  }
}
</style>